<template>
    <div class="yb-help">
        <yb-header></yb-header>
        <div class="center">
            <div class="nav">
                <el-menu default-active="special" mode="vertical" class="menu" @select="showMarked">
                    <el-menu-item-group title="">
                        <el-menu-item index="special">油巴系统特点</el-menu-item>
                        <el-menu-item index="boxOperate">盒子如何操作</el-menu-item>
                        <el-menu-item index="fuelManage">加油机如何管理</el-menu-item>
                        <el-menu-item index="icBenifit">ic卡有什么好处</el-menu-item>
                        <el-menu-item index="icOperate">ic卡如何操作</el-menu-item>
                        <el-menu-item index="account">账户如何管理</el-menu-item>
                        <el-menu-item index="queryInfo">如何查询信息</el-menu-item>
                    </el-menu-item-group>
                </el-menu>
            </div>
            <div class="nav-conter">
                <div v-html="mdstr" class="markDown">11</div>
            </div>
        </div>
        <yb-footer></yb-footer>
    </div>
</template>

<script>
    import header from '../packages/header.vue'
    import footer from '../packages/footer.vue'
    import marked from 'marked'
    import axios from 'axios'

    export default {
        name: 'help',
        components: {
            'yb-header': header,
            'yb-footer': footer
        },
        created: function () {
            this.showMarked('special')
        },
        methods: {
            showMarked: function (index) {
                axios.get(
                    '/static/help/' + index + ".md", {
                        baseURL: '',

                    })
                    .then((response) => {
                        let a = marked(response.data, {
                            sanitize: true
                        })
                        this.mdstr = a
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }
        },
        data: function () {
            return {
                mdstr: '',
                input: '',
                problems: [{
                    label: '盒子操作说明'
                }, {
                    label: '加油机操作说明'
                }, {
                    label: '如何查询信息'
                }, {
                    label: '油巴系统特点'
                }, {
                    label: '账户如何管理'
                }, {
                    label: 'ic卡如何操作'
                }, {
                    label: 'ic卡有什么好处'
                    }]
            }
        }
    }

</script>

<style lang="less">
    @import "../less/variables";

    .yb-help {
        .center {
            width: @layout-width;
            margin: 0 auto;
            margin-top: 35px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            .nav {
                vertical-align: middle;
                width: 250px;
                .menu {
                    background: white;
                    height: 650px;
                    .el-menu-item {
                        padding: 0px !important;
                        text-align: center;
                        height: 35px;
                        line-height: 35px;
                    }

                    .is-active
                    {
                        background: #44b549;
                        color: white !important;
                    }
                }
            }
            .nav-conter {
                width: 100%;
                padding: 40px 60px;
                margin-left: 20px;
                vertical-align: middle;
                background: white;
                display: inline-block;
                .search {
                    display: flex;
                }
                .btn {
                    flex: 1;
                    input {
                        line-height: 45px;
                        height: 45px;
                        width: 100% !important;
                        border-radius: 0;
                    }
                }
                .btn-sum {
                    line-height: 45px;
                    height: 45px;
                    color: white;
                    background: #44b549;
                    width: 45px;
                    text-align: center;
                    font-size: 20px;
                    cursor: pointer;
                }
                .help-item {
                    margin-top: 30px;
                    .list {
                        line-height: 40px;
                    }
                }
            }
        }
    }

</style>
